<template>
  <div>
    <el-tag type="success" style="font-size: 20px">新疆青松建材化工(集团)股份有限公司水泥分公司过磅单</el-tag>
  </div>
  <input type="text" name="xxx" value="default_value" placeholder="请输入xxx">
  <div class="form-container">
    <el-row style="width:1400px;height:50px">
      <el-form-item label="单据编号：" prop="djBh">
        <el-col :span="18">
          <el-input type="text" v-model="djBh" required/>
        </el-col>
      </el-form-item>

      <el-form-item label="订单编号：" prop="ddBh">
        <el-col :span="18">
          <el-input type="text" v-model="ddBh" required/>
        </el-col>
      </el-form-item>

      <el-form-item label="制单日期：" prop="birthday">
        <el-col :span="66">
          <el-date-picker type="datetime"
                          format="YYYY-MM-DD HH:mm:ss"
                          value-format="YYYY-MM-DD HH:mm:ss"
                          placeholder="选择日期"
                          v-model="zdDate"
                          style="width: 100%;">

          </el-date-picker>
        </el-col>
      </el-form-item>
    </el-row>
  </div>
  <table>
    <tr>
      <td>提货单位</td>
      <td colspan="3">
        <el-input type="text" v-model="companyName" required/>
      </td>
      <td>送货地址</td>
      <td colspan="2"></td>

    </tr>
    <tr>
      <td>供货单位</td>
      <td colspan="3">新疆青松建材化工(集团)股份有限公司水泥分公司( 新 线 )</td>
      <td>承运单位</td>
      <td colspan="2"></td>
    </tr>
    <tr>
      <td>销售单位</td>
      <td colspan="3">新疆青松建材化工(集团)股份有限公司水泥分公司</td>
      <td>水泥编号</td>
      <td colspan="2">
        <el-input type="text" v-model="snBh" required/>
      </td>
    </tr>
    <tr>
      <td>品种规格</td>
      <td colspan="2">
        <el-input type="text" v-model="pzGg" required/>
      </td>
      <td>业务员</td>
      <td>
        <el-input type="text" v-model="ywy" required/>
      </td>
      <td>车号</td>
      <td>
        <el-input type="text" v-model="wagonNumber" required/>
      </td>
    </tr>
    <tr>
      <td>计划量</td>
      <td>毛重</td>
      <td>皮重</td>
      <td>净重</td>
      <td>袋数</td>
      <td>提货方式</td>
      <td>汽运自提</td>
    </tr>
    <tr>
      <td><el-input type="text" v-model="jhl" required/></td>
      <td><el-input type="text" v-model="roughWeight" required/></td>
      <td><el-input type="text" v-model="tare" required/></td>
      <td><el-input type="text" v-model="suttle" required/></td>
      <td></td>
      <td>皮重时间</td>
      <td>
        <el-date-picker type="datetime"
                        format="YYYY-MM-DD HH:mm:ss"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        placeholder="选择日期"
                        v-model="tareDate"
                        style="width: 100%;">

        </el-date-picker>
      </td>
    </tr>
    <tr>
      <td>备注</td>
      <td colspan="4"></td>
      <td>毛重时间</td>
      <td>
        <el-date-picker type="datetime"
                        format="YYYY-MM-DD HH:mm:ss"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        placeholder="选择日期"
                        v-model="roughWeightDate"
                        style="width: 100%;">

        </el-date-picker>
      </td>
    </tr>
    <tr>
      <td>制单：</td>
      <td colspan="4"><el-input :disabled="true" type="text" v-model="companyName" required/></td>
      <td>司机：</td>
      <td>万世超</td>
    </tr>
  </table>
  <el-button type="success" @click='downloadPDF' >下载pdf</el-button>
</template>

<script>
import { downloadFile } from '@/store'

export default {
  components: {},
  data() {
    return {
      formInline: {
        user: "",
        region: "",
      },
      zdDate: "",
      djBh: "",
      ddBh: "",
      companyName: "",
      snBh: "",
      pzGg: "",
      ywy: "",
      wagonNumber: "",
      jhl: "",
      roughWeight: "",
      tare: "",
      suttle: "",
      tareDate: "",
      roughWeightDate: "",
      whichLeague: "",
      aaa: ""

    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    downloadPDF(){
      let url = 'http://localhost:15628/shadow/pdf/createQualificationPdf'
      // 也可能你不需要这个参数
      let params = {
        zdDate: this.zdDate,
        djBh: this.djBh,
        ddBh: this.ddBh,
        companyName: this.companyName,
        snBh: this.snBh,
        pzGg: this.pzGg,
        ywy: this.ywy,
        wagonNumber: this.wagonNumber,
        jhl: this.jhl,
        roughWeight: this.roughWeight,
        tare: this.tare,
        suttle: this.suttle,
        tareDate: this.tareDate,
        roughWeightDate: this.roughWeightDate
      }
      let method = 'post'
      // 调用引入的封装好的方法
      downloadFile(url , method , params)
    }

  },
};

</script>

<style>
table {
  width: 80%;
  margin: 0 auto;
  border: 1px black solid;

  /* border-spacing：指定边框之间的距离；边框之间虽然没有距离了，但是实际上是两条边框的和，看起来是变粗了 */
  /* border-spacing: 0; */

  /*border-collapse:collapse；设置边框的合并；真正的将两条边框合并成一条边框 */
  border-collapse: collapse;

  /* 默认情况下元素在td中是垂直居中的，可以通过vectical-align来修改 */
  vertical-align: middle;
  text-align: center;
}

/* 如果表格中没有使用tbody而是直接使用tr，那么浏览器会自动创建一个tbody，并且将tr全都放到tbody中
   所以说，tr不是table的子元素 */
tbody tr:nth-child(odd) {
  background-color: rgb(211, 216, 188);
}

td {
  border: 1px black solid;
}


input {
  color: #999;
  outline: none;
  margin-right: 157px;
}


</style>
